<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import TopBar from '@/components/Topbar/index.vue';
import getRules from "@/validUtils";
import UploadImg from '@/components/UploadImg/index.vue';
import { uniqueFunc } from '@/utils/common.js'
import {getPageProducts} from '@/api/ShopDatabase/index.js'
import { closeTag } from '@/utils/globalWay'
import { getFieldValue,generateInitials,limitFloat,limitInt,giveFloatMin,giveIntMin } from '@/utils/common.js'
import { useDistInfoStore } from '@/stores/dict.js';
import { getMaterialsList } from '@/api/ShopDatabase/materials.js';
import { keepProject,getProjectDetail } from '@/api/ShopDatabase/project.js'
import { getBaseSetting,getAllCommodityExtraAttributes } from '@/api/ShopDatabase/goodsSetting.js'
import useDiffValue from '@/views/EngageManagement/ShopDatabase/ProductManagement/Hooks/useDiffValue.js'
import { minSalePriceRules } from '../ProductManagement/Components/rules'
const route = useRoute();
const router = useRouter();
const backValue = ref('ProjectManagementIndex');
const tabName = ref("编辑项目");
const moduleType = ref("基础信息");
const distInfoStore = useDistInfoStore();
const formRef = ref(null);
const shopFormRef = ref(null);
const form = ref({
    needValue:"1",
    code:"",
    projectName:"",
    mnemonicCode:"",
    serviceTime:"",
    businessBrandId:[],

    activityImg:[],
    salesState:1,
    salesClassIdList:[],
    retailPrice:"",
    costPrice:"",
    minSellingPrice:'', //最低售价
    diagnosticStep:"",
})
const shopForm = ref({
    mallInfoPut:1,
    mallInfoValidity:"",
    mallInfoDetails:"",
    projectPictureList:[],
    purchaseNotes:""
})
const brandList = computed(()=>{
    return distInfoStore.getDistInfo("经营品牌").map(lis=>{
        return {
            value:lis.id,
            label:lis.permissionName
        }
    })
})
const timelongList= ref([]);
for(let i = 15;i<=4*60;i+=15){
    timelongList.value.push({
        label:`${ i } 分钟`,
        value:i
    })
}
const backValueActivityImg = (img)=>{
    form.value.activityImg = img;
    formRef.value.clearValidate(['activityImg']);
}
const setMnemonicCode = (value)=>{
    form.value.mnemonicCode = generateInitials(value);
}
const classifyList = ref([]);
const typeOptions = ref([]);
const _getBaseSetting = async ()=>{
    classifyList.value = [];
    typeOptions.value = [];
    try{
        let result = await getBaseSetting();
        classifyList.value =  getFieldValue('销售分类',result,'id');
        typeOptions.value = getFieldValue('类别',result,'id');
        formInline.value[2].data = typeOptions.value;
        formInlineMaterials.value[2].data = typeOptions.value;
    }catch(e){

    }
}

const projectAttributesList = ref([]);
const _getAllCommodityExtraAttributes = async ()=>{
    projectAttributesList.value = [];
    try{
        let result = await getAllCommodityExtraAttributes();
        if(result.projectAttributesList && result.projectAttributesList.length>0){
            projectAttributesList.value = result.projectAttributesList.filter(value=>value.disabled == 0).map(lis=>{
                if(lis.fieldType == 3 || lis.fieldType == 4){
                    lis.optionContent = lis.optionContent.split(",")
                }
                if(lis.fieldType == 4){
                    return {...lis,fieldValue:[]};
                }else{
                    return {...lis,fieldValue:""};
                }

            })
            console.log(projectAttributesList.value,222);
        }

    }catch(e){
        console.log(e);
    }
}

const backValueActivityDetailImg = (img)=>{
    shopForm.value.projectPictureList = img;
    shopFormRef.value.clearValidate(['mallInfoDetails']);
}
const rules = ref({
    businessBrandId:[
        { required:true,validator: (rule, value, callback) => {
                if (value.length<=0) {
                    return callback(new Error("请选择经营品牌"));
                }
                return callback();
            }, trigger: "change"
        },
    ],

})
const shopRules = ref({
    mallInfoDetails:[
        { required:true,validator: (rule, value, callback) => {
                if (((value??'') === '') && (shopForm.value.projectPictureList.length<=0)) {
                    return callback(new Error("请输入项目详情"));
                }
                return callback();
            }, trigger: "change"
        },
    ],

})

// const img1 = ref(new URL("@/assets/images/login-bg3.png",import.meta.url));
const confrimProduct = ()=>{
    if(checkData.value.length>50){

        ElMessage.error('可添加的耗材产品上限为50');
        return;
    }
    materialsList.value = [...checkData.value,...checkDataMaterials.value];
    materialsList.value = materialsList.value.map(lis=>{
        console.log(lis.infoType);
        return {
            
            consumeNum:lis.consumeNum?lis.consumeNum:"",
            isConsume:lis.isConsume?lis.isConsume:false,
            infoType:1,
            ...lis,
        }
    })
    productFlag.value = false;
}


const formInline = ref([
    {
      type: "datePicker",
      prop: ["startDate", "endDate"],
      startPlaceholder: "创建开始时间",
      endPlaceholder: "创建结束时间",
      label: "",
      model: [],
    },
    {
      type: "input",
      prop: 'fuzzyValue',
      placeholder: "产品名称/编号/助记码/条码",
      label: "",
      model: '',
    },
    {
      type: "select",
      placeholder: "类别",
      label: '',
      filterable:true,
      prop: 'category',
      data:[],
      model: "",
    },
    {
        type: "select",
        placeholder: "经营品牌",
        label: '',
        prop: 'businessBrandId',
        multiple:true,
        data:distInfoStore.getDistInfo("经营品牌").map(lis=>{
          return {
            value:lis.id,
            label:lis.permissionName
          }
        }),
        model: [],
    },

])
const btnLefts = ref([]);
const btnRights = ref([
])
const tableConfig = ref([
    {
      type:'slot',
      label:'产品编号',
      prop:'code',
      width:150,
      slotName:'productCode'
    },
    {
      type:'slot',
      label:'产品名称',
      prop:'productName',
      width:296,
      slotName:'productName'
    },
    {
      label:'产品类别',
      prop:'category',
      width:174
    },
    {
      prop: "businessBrandId",
      label: "经营品牌",
      width:300,
      format:(value)=>{

        let businessBrandId = value.split(',');

        let strArr = distInfoStore.getDistInfo("经营品牌").filter(lis=>{
          return businessBrandId.includes(lis.id)
        }).map(lis=>lis.permissionName)
        return strArr.join('，');
      }
    },
    {
      label:'销售状态',
      prop:'salesState',
      width:100,
      format:(value)=> value ? '正常' : '停售'
    },
    {
      label:'创建时间',
      prop:'createTime',
      width:200
    },
])
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);
const productFlag = ref(false);
const checkData = ref([]);
const seachTable = ref(null);

const handlerSearch = async (formInline)=>{
    
    tableLoading.value = true;
    try{
        formInline.businessBrandId = formInline.businessBrandId.join(',')
        const res = await getPageProducts(formInline);
        
        totalPage.value = Number(res.total);

        tableData.value = res.records.map(lis=>{
            return {
                ...lis,
                pictureUrl:lis.firstPicture
            }
        })
        tableData.value.forEach(value=>{
            value.isConsume = false;
            value.infoType = 1;
            value.consumeNum = "";
            checkData.value.forEach(lis=>{
                if(value.id == lis.id){
                    value.isConsume = lis.isConsume;
                    value.consumeNum = lis.consumeNum;
                }
            })
        })
        console.log(tableData.value,6666);
        nextTick(()=>{
            toggleSelection();
        })
        tableLoading.value = false;
    }catch(e){
        
        tableLoading.value = false;
    }
}
const selectHandle = (val,row)=>{
  let index = checkData.value.map(value=>value.id).indexOf(row.id);
  if(index >=0){
      removeData([row.id]);
  }else{
      checkData.value = uniqueFunc([row,...checkData.value],'id');
  }

}
const selectAllChange = (col)=>{
  if(col.length>0){
      checkData.value = uniqueFunc([...col,...checkData.value],'id');
  }else{
      let ids = tableData.value.map(value=>value.id);
      removeData(ids);
  }
};
//移除未选中的数据
const removeData = (ids)=>{
    checkData.value = checkData.value.filter(value=>ids.indexOf(value.id) == -1);
};
const toggleSelection = ()=>{
  //获取所有选中的id
  let ids = checkData.value.map(value=>value.id);
  //过滤获取相同值
  let repeatValue = tableData.value.filter(value=>ids.indexOf(value.id) != -1);
  seachTable.value.checkHaveData(repeatValue);
};
const materialsList = ref([]);
const formInlineMaterials = ref([
    {
      type: "datePicker",
      prop: ["startDate", "endDate"],
      startPlaceholder: "创建开始时间",
      endPlaceholder: "创建结束时间",
      label: "",
      model: [],
    },
    {
      type: "input",
      prop: "fuzzyValue",
      placeholder: "物资名称/编号/助记码/条码",
      label: "",
      model: "",
    },
    {
      type: "select",
      placeholder: "物资类别",
      label: '',
      filterable:true,
      prop: 'category',
      data:[],
      model: "",
    },
    {
        type: "select",
        placeholder: "经营品牌",
        label: '',
        prop: 'businessBrandId',
        multiple:true,
        data:distInfoStore.getDistInfo("经营品牌").map(lis=>{
          return {
            value:lis.id,
            label:lis.permissionName
          }
        }),
        model: [],
    },

])
const btnLeftsMaterials = ref([]);
const btnRightsMaterials = ref([
])
const tableConfigMaterials = ref([
    {
      prop: "code",
      label: "物资编号",
      type:"slot",
      slotName:'code',
      width:150
    },
    {
      prop: "goodsName",
      label: "物资名称",
      type:"slot",
      slotName:'goodsName',
      width:310
    },
    {
      prop: "businessBrandId",
      label: "经营品牌",
      width:300,
      format:(value)=>{

        let businessBrandId = value.split(',');

        let strArr = distInfoStore.getDistInfo("经营品牌").filter(lis=>{
          return businessBrandId.includes(lis.id)
        }).map(lis=>lis.permissionName)
        return strArr.join('，');
      }
    },
    {
      prop: "createTime",
      label: "创建时间",
      width:250
    },
])
const tableLoadingMaterials = ref(false)
const totalPageMaterials = ref(0)
const tableDataMaterials = ref([]);
const materialsFlag = ref(false);
const checkDataMaterials = ref([]);
const seachTableMaterials = ref(null);
const handlerSearchMaterials = async (formInline)=>{
    tableLoadingMaterials.value = true;
    try{
        formInline.businessBrandId = formInline.businessBrandId.join(',')
        let result = await getMaterialsList(formInline)
        totalPageMaterials.value = Number(result.total);
        
        tableDataMaterials.value = result.records;
        tableDataMaterials.value.forEach(value=>{
            value.isConsume = false;
            value.infoType = 2;
            value.consumeNum = "";
            checkDataMaterials.value.forEach(lis=>{
                if(value.id == lis.id){
                    value.isConsume = lis.isConsume;
                    value.consumeNum = lis.consumeNum;
                }
            })
        })
        console.log(tableDataMaterials.value,777);
        nextTick(()=>{
            toggleSelectionMaterials();
        })
        tableLoadingMaterials.value = false;
    }catch(e){
        tableLoadingMaterials.value = false;
    }
}
const selectHandleMaterials = (val,row)=>{
  let index = checkDataMaterials.value.map(value=>value.id).indexOf(row.id);
  if(index >=0){
    removeDataMaterials([row.id]);
  }else{
    checkDataMaterials.value = uniqueFunc([row,...checkDataMaterials.value],'id');
  }
  console.log(checkDataMaterials.value,222);
}
const selectAllChangeMaterials = (col)=>{
  if(col.length>0){
    checkDataMaterials.value = uniqueFunc([...col,...checkDataMaterials.value],'id');
  }else{
      let ids = tableDataMaterials.value.map(value=>value.id);
      removeDataMaterials(ids);
  }
};
//移除未选中的数据
const removeDataMaterials = (ids)=>{
    checkDataMaterials.value = checkDataMaterials.value.filter(value=>ids.indexOf(value.id) == -1);
};
const toggleSelectionMaterials = ()=>{
  //获取所有选中的id
  let ids = checkDataMaterials.value.map(value=>value.id);
  //过滤获取相同值
  let repeatValue = tableDataMaterials.value.filter(value=>ids.indexOf(value.id) != -1);
  seachTableMaterials.value.checkHaveData(repeatValue);
};
const delMaterials = (index,type)=>{
    ElMessageBox.confirm(`确定删除该${ type==1?'产品':'物资'}码？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        beforeClose: async (action, instance, done) => {
            if (action === 'confirm') {
                materialsList.value.splice(index,1);
                done()
            } else {
                done()
            }
        }
    })
}

const openProductList = ()=>{
    productFlag.value = true;
    checkData.value = [...materialsList.value.filter(lis=>lis.infoType==1)];

}
const openMaterialsList = ()=>{
    materialsFlag.value = true;
    checkDataMaterials.value = [...materialsList.value.filter(lis=>lis.infoType==2)];

    
}
const cancelProductList = ()=>{
    productFlag.value = false;
    checkData.value = [...materialsList.value.filter(lis=>lis.infoType==1)];

}
const cancelMaterialsList = ()=>{
    materialsFlag.value = false;
    checkDataMaterials.value = [...materialsList.value.filter(lis=>lis.infoType==2)];

    
}
const confrimMaterials = ()=>{
    if(checkDataMaterials.value.length>50){

        ElMessage.error('可添加的耗材物资上限为50');
        return;
    }
    materialsList.value = [...checkData.value,...checkDataMaterials.value];
    materialsFlag.value = false;
}


const attrData = ref([])
const attrFlag = ref(false);
const attrForm = ref({
    type:"",
    name:"",
    isRequired:false,
    selectType:1,
    selectValue:[{
        value:"",
        isDefault:false
    }],
    defaultValue:""
})
const attrRef = ref(null);
const confrimAttr = ()=>{
    if(attrData.value.length>=30){
        ElMessage.error("添加上限不超过30个");
        return;
    }
    attrRef.value.validate(async (valid, fields) => {
        if (valid) {
            if(attrForm.value.type == 3){
                let flag = false;
                attrForm.value.selectValue.forEach(lis=>{
                    if((lis.value??'') === ''){
                        flag = true;
                    }
                })
                if(flag){
                    ElMessage.error("选项内容不能为空");
                    return;
                }
            }
            attrData.value.push(attrForm.value);
            console.log(attrData.value,555);
            attrFlag.value  = false;
        }
    })
}
const delAttr = (index)=>{
    ElMessageBox.confirm(`确定删除该属性码？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        beforeClose: async (action, instance, done) => {
            if (action === 'confirm') {
                attrData.value.splice(index,1);
                done()
            } else {
                done()
            }
        }
    })
}
const setAttrDefault = (info,index)=>{
    if(attrForm.value.selectType == 1){
        attrForm.value.defaultValue = info;
        attrForm.value.selectValue.forEach(lis=>{
            lis.isDefault = false
        })
        attrForm.value.selectValue[index].isDefault = true;
    }else if(attrForm.value.selectType == 2){
        attrForm.value.defaultValue.push({
            key:info + '-' + index,
            value:info
        })
        attrForm.value.selectValue[index].isDefault = true;
    }
    
}
const checkRepeat = (value,index)=>{
    let flag = -1;
    attrForm.value.selectValue.forEach((lis,i)=>{
        if((lis.value !=='') && (index != i) && (lis.value == value)){
            console.log(lis.value,value);
            flag = i
        }
    })
    if(flag != -1){
        ElMessage.error('选项值不能重复');
        attrForm.value.selectValue[index].value = "";
    }
}
const checkRepeatName = (name)=>{
    let flag = -1;
    attrData.value.forEach((lis,key)=>{
        if(lis.name == name){
            flag = key
        }
    })
    if(flag != -1){
        ElMessage.error('属性名称不能重复');
        attrForm.value.name = "";
    }
}
const cancelAttrDefault = (info,index)=>{
    if(attrForm.value.selectType == 1){
        attrForm.value.defaultValue = "";
        attrForm.value.selectValue[index].isDefault = false;
    }else if(attrForm.value.selectType == 2){
        let key = -1;
        attrForm.value.defaultValue.forEach((lis,i)=>{
            if(lis.key == (info + '-' + index)){
                key = i
            }
        })
        attrForm.value.selectValue[index].isDefault = false;
        attrForm.value.defaultValue.splice(key,1);
    }
}
const openAttr = ()=>{
    attrFlag.value  = true;
    attrForm.value = {
        type:1,
        name:"",
        isRequired:false,
        selectType:1,
        selectValue:[{
            value:"",
            isDefault:false
        }],
        defaultValue:""
    }
}
const changeSelectType = (type)=>{
    if(attrForm.value.selectType == 2){
        attrForm.value.defaultValue = [];
    }else{
        attrForm.value.defaultValue = "";
    }
    attrForm.value.selectValue = [{
        value:"",
        isDefault:false
    }]
}
const increHandle = ()=>{
    attrForm.value.selectValue.push({
        value:"",
        isDefault:false
    });
}
const diffHandle = (index,info)=>{
    if(attrForm.value.selectType == 2){
        if(attrForm.value.selectValue[index].isDefault){
            let flag = -1;
            attrForm.value.defaultValue.forEach((i,k)=>{
                if(i.key == info + '-' + index){
                    flag = k;
                }
            })
            attrForm.value.defaultValue.splice(flag,1)
        }
    }else{
        attrForm.value.defaultValue = "";
    }

    attrForm.value.selectValue.splice(index,1);



}
const editIsConsume = (index)=>{
    materialsList.value[index].consumeNum = "";
    checkData.value = materialsList.value.filter(lis=>lis.infoType == 1);    
    checkDataMaterials.value = materialsList.value.filter(lis=>lis.infoType == 2);    
}
const editConsumeNum = (index)=>{
    checkData.value = materialsList.value.filter(lis=>lis.infoType == 1); 
    checkDataMaterials.value = materialsList.value.filter(lis=>lis.infoType == 2);      
}
const keepLoading = ref(false);
let oldDetails = {};
const submit  = ()=>{
    formRef.value.validate((validOne, fields,msg)=>{
        if(validOne){
            shopFormRef.value.validate(async (validTwo, fields)=>{
                if(validTwo){
                    // if(form.value.activityImg.length<=0){
                    //     ElMessage.error('项目图片未传');
                    //     moduleType.value = '基础信息';
                    //     return;
                    // }

                    const newValue = {
                        retailPrice:+form.value.retailPrice,
                        salesStatus:+form.value.salesState,
                    }
                    const isDiff = await useDiffValue(oldDetails,newValue);
                    if(!isDiff) return
                    let params = {
                        id:uuid.value,
                        add:0,
                        projectName:form.value.projectName,
                        mnemonicCode:form.value.mnemonicCode,
                        businessBrandId:form.value.businessBrandId.join(','),
                        serviceTime:form.value.serviceTime,
                        projectPictureList:[...form.value.activityImg.map(value=>{
                            return {
                                url:value,
                                sourceType:2    
                            }
                        }),...shopForm.value.projectPictureList.map(value=>{
                            return {
                                url:value,
                                sourceType:5    
                            }
                        })],
                        salesState:form.value.salesState,
                        salesClass:form.value.salesClassIdList.map(item=>classifyList.value.find(f=>f.value == item).label).join(','),
                        salesClassIdList:form.value.salesClassIdList,
                        retailPrice:form.value.retailPrice,
                        costPrice:form.value.costPrice,
                        minSellingPrice:form.value.minSellingPrice, //最低售价
                        diagnosticStep:form.value.diagnosticStep,
                        mallInfoPut:shopForm.value.mallInfoPut,
                        mallInfoValidity:shopForm.value.mallInfoValidity,
                        mallInfoDetails:shopForm.value.mallInfoDetails,
                        purchaseNotes:shopForm.value.purchaseNotes,
                        projectAttributeList:[],
                        executionList:[],
                        disposablesProductList:[],
                        disposablesGoodsList:[]
                    }
                    projectAttributesList.value.forEach(lis=>{
                        params.projectAttributeList.push({
                            sourceType:2,
                            extraAttributesName:lis.fieldName,
                            optionContent:lis.fieldType == 3 || lis.fieldType ==4?lis.optionContent.join(','):"",
                            fieldType:lis.fieldType,
                            extraAttributesValue:lis.fieldType ==4?lis.fieldValue.join(','):lis.fieldValue,
                            extraAttributesId:lis.id
                        })
                    })
                    attrData.value.forEach(lis=>{
                        let fieldType = lis.type;
                        if(lis.type == 3 && lis.selectType == 1){
                            fieldType = 3;
                        }else if(lis.type == 3 && lis.selectType == 2){
                            fieldType = 4;
                        }
                        
                        params.executionList.push({
                            fieldType:fieldType,
                            fieldName:lis.name,
                            optionContent:lis.selectValue.map(i=>{
                                return i.value
                            }).join(','),
                            defaultValue:fieldType==4?lis.defaultValue.map(i=>{
                                return i.value
                            }).join(','):lis.defaultValue,
                            required:lis.isRequired?1:0
                        })
                    })
                    materialsList.value.forEach(lis=>{
                        if(lis.infoType == 1){
                            params.disposablesProductList.push({
                                baseId:lis.id,
                                sourceType:1,
                                oneOff:lis.isConsume?1:0,
                                frequency:lis.consumeNum
                            })
                        }
                        if(lis.infoType == 2){
                            params.disposablesGoodsList.push({
                                baseId:lis.id,
                                sourceType:4,
                                oneOff:lis.isConsume?1:0,
                                frequency:lis.consumeNum
                            })
                        }
                    })
  
                    keepLoading.value = true;
                    try{
                        await keepProject(params)
                        ElMessage.success('编辑成功');
                        closeTag(route.name);
                        router.replace({name:backValue.value});
                    }catch(e){
                    }finally{
                        keepLoading.value = false;
                    }
                 

                }else{
                    ElMessage.error('商城信息未填写完整');
                    moduleType.value = '商城信息';
                }
            });
        }else{
            ElMessage.error('基础信息未填写完整');
            moduleType.value = '基础信息';
        }
    });
}

const pageLoading = ref(false);
const uuid = ref(route.query.id || "");
const _getProjectDetail = async ()=>{
    pageLoading.value = true;
    try{
        await _getBaseSetting();
        await _getAllCommodityExtraAttributes();
        let result = await getProjectDetail({id:uuid.value});
        oldDetails = {
            retailPrice:+result.retailPrice,
            salesStatus:+result.salesState,
        }
        form.value = {
            needValue:"1",
            code:result.code,
            projectName:result.projectName,
            mnemonicCode:result.mnemonicCode,
            serviceTime:result.serviceTime,
            businessBrandId:result.businessBrandId?result.businessBrandId.split(","):[],
            activityImg:result.projectPictureList?result.projectPictureList.map(value=>{
                return value.url
            }):[],
            salesState:result.salesState,
            salesClassIdList:result.salesClassIdList || [],
            retailPrice:result.retailPrice,
            costPrice:result.costPrice,
            minSellingPrice:result.minSellingPrice,//最低售价
            diagnosticStep:result.diagnosticStep,
        }
        shopForm.value = {
            mallInfoPut:result.mallInfoPut,
            mallInfoValidity:result.mallInfoValidity,
            mallInfoDetails:result.mallInfoDetails,
            projectPictureList:result.mallPictureList?result.mallPictureList.map(value=>{
                return value.url
            }):[],
            purchaseNotes:result.purchaseNotes
        }
        checkData.value = result.disposablesProductList.map(value=>{
            return {
                ...value,
                id:value.baseId,
                isConsume:value.oneOff == 1?true:false,
                infoType:1,
                consumeNum:value.frequency,
                productName:value.baseName,
                pictureUrl:value.basePicture,
                code:value.baseCode
            }
        });
        checkDataMaterials.value = result.disposablesGoodsList.map(value=>{
            return {
                ...value,
                id:value.baseId,
                isConsume:value.oneOff == 1?true:false,
                infoType:2,
                consumeNum:value.frequency,
                goodsName:value.baseName,
                pictureUrl:value.basePicture,
                code:value.baseCode
            }
        });
        materialsList.value = [...checkData.value,...checkDataMaterials.value];

        attrData.value = result.executionList.map(value=>{
            let fieldType = value.fieldType;
            let selectType = "";
            if(value.fieldType == 3){
                fieldType = 3;
                selectType = 1;
            }else if(value.fieldType == 4){
                fieldType = 3;
                selectType = 2;
            }
            return{
                type:fieldType,
                selectType:selectType,
                name:value.fieldName,
                selectValue:value.optionContent?value.optionContent.split(",").map(lis=>{
                    return {
                        value:lis,
                        isDefault:value.defaultValue.indexOf(lis) != -1?true:false,
                    }
                }):[],
                isRequired:value.required == 1?true:false,
                defaultValue:value.fieldType == 4?value.defaultValue.split(",").map((lis,key)=>{
                    return{
                        value:lis,
                        key:lis + '-' + key
                    }
                }):value.defaultValue
            }
        });
        
        result.projectAttributeList.forEach(info=>{
            projectAttributesList.value.forEach(lis=>{
                if(info.extraAttributesId == lis.id){
                    lis.fieldValue = lis.fieldType ==4?info.extraAttributesValue.split(',').filter(value=>value!=""):info.extraAttributesValue
                }
            })
        })
    


    }catch(e){
        console.log(e);
    }finally{
        pageLoading.value = false;
    }
}
_getProjectDetail();
const changeSalesState = (val)=>{
    shopForm.value.mallInfoValidity = "";
    shopForm.value.mallInfoDetails = "";
    shopForm.value.projectPictureList = [];
    shopForm.value.purchaseNotes = "";
    shopForm.value.mallInfoPut = val;
}
const changeMallInfoPut = ()=>{
    shopForm.value.mallInfoValidity = "";
    shopForm.value.mallInfoDetails = "";
    shopForm.value.projectPictureList = [];
    shopForm.value.purchaseNotes = "";
}
const blurRetailPrice = ()=>{
    form.value.retailPrice=giveFloatMin(form.value.retailPrice)
    if(form.value.minSellingPrice){
            formRef.value.validateField(['minSellingPrice'])
        }
    }
onActivated(()=>{
    if(uuid.value !== route.query.id){

        uuid.value = route.query.id;
        _getProjectDetail();
    }

})
</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName">
            <template #operate>

                <el-button type="primary" style="min-width: 68px" @click="submit" :loading="keepLoading">保存</el-button>
            </template>
        </TopBar>
        <div class="info-contain" v-loading="pageLoading">
            <div class="btn-opea">
                <el-radio-group v-model="moduleType">
                    <el-radio-button label="基础信息" />
                    <el-radio-button label="商城信息" />
                </el-radio-group>
            </div>
            <div class="info-lis" v-show="moduleType == '基础信息'">

                <el-form :model="form" label-width="80px" :rules="rules" ref="formRef">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">基础属性</span>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="项目编号"  required prop="needValue">
                                <el-input v-model="form.code" placeholder="保存后自动生成" disabled style="width:260px"/>
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="项目名称" :rules="getRules('input', '项目名称')" prop="projectName">
                                <el-input v-model="form.projectName" placeholder="请输入" style="width:260px" :maxlength="50" @blur="setMnemonicCode(form.projectName)"/>
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="助记码" :rules="getRules('input', '助记码')" prop="mnemonicCode">
                                <el-input v-model="form.mnemonicCode" placeholder="请输入" style="width:260px"/>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="经营品牌" prop="businessBrandId" >
                                <el-select v-model="form.businessBrandId" placeholder="请选择"  clearable v-selectClose style="width:260px" multiple collapse-tags>
                                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in brandList" :key="index"/>
                                </el-select> 
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="服务时长" :rules="getRules('select', '服务时长')" prop="serviceTime">
                                <el-select v-model="form.serviceTime" placeholder="请选择"  clearable v-selectClose style="width:260px">
                                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in timelongList" :key="index"/>
                                </el-select>    
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="项目图片">
                                <div style="width:100%;position: relative;">
                                    <UploadImg :multiple="true" @backValue="backValueActivityImg"  :imageListUrlInfo="form.activityImg">
                                    </UploadImg>
                                    <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:4px">
                                        支持jpg、jpeg、png格式，图片比例1:1；建议为300*300，最多5张，单张不超过5M
                                    </div>
                                </div>

  
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="销售状态" prop="salesState" :rules="getRules('select', '销售状态')">
                                <el-radio-group v-model="form.salesState" class="ml-4" @change="changeSalesState">
                                    <el-radio :label="1">正常</el-radio>
                                    <el-radio :label="2">停售</el-radio>
                                </el-radio-group>
                                <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:3px">
                                    设置针对经营该商品的所有门店生效。正常时，门店可在线上线下对外销售商品
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="销售分类" :rules="getRules('select', '销售分类')" prop="salesClassIdList">
                                <el-select v-model="form.salesClassIdList" placeholder="请选择"  clearable v-selectClose style="width:260px" multiple collapse-tags>
                                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in classifyList" :key="index"/>
                                </el-select> 
                                <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:3px">
                                    门店线上线下销售商品时，展示在商城和收银台的分类
                                </div>
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="零售价" :rules="getRules('input', '零售价')" prop="retailPrice">
                                <el-input v-model="form.retailPrice" placeholder="请输入" style="width:260px"
                                 @input="()=>{form.retailPrice=limitFloat(form.retailPrice)}" 
                                 @blur="blurRetailPrice"
                                 />
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="成本价" prop="costPrice">
                                <el-input v-model="form.costPrice" placeholder="请输入" style="width:260px" @input="()=>{form.costPrice=limitFloat(form.costPrice)}" @blur="()=>{form.costPrice=giveFloatMin(form.costPrice)}"/>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="最低售价" prop="minSellingPrice" :rules="minSalePriceRules(form.retailPrice)">
                          
                                <el-input 
                                style="width:260px"
                                class="formWidth" 
                                :maxlength="50" 
                                @blur="()=>{form.minSellingPrice=giveFloatMin(form.minSellingPrice)}"
                                @input="()=>{form.minSellingPrice=limitFloat(form.minSellingPrice)}" 
                                v-model.trim="form.minSellingPrice"
                                placeholder="请输入"
                                ></el-input>
                                <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:10px">门店线上线下销售商品时，商品改价不得低于最低售价</div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="耗材信息">
                                <div style="width:100%">
                                    <el-button plain type="primary" @click="openProductList()">
                                        <img src="@/assets/icon/btn-add-blue.png" alt="" style="margin-right:8px;width:14px;height:14px">
                                        消耗产品
                                    </el-button>
                                    <el-button plain type="primary" @click="openMaterialsList()">
                                        <img src="@/assets/icon/btn-add-blue.png" alt="" style="margin-right:8px;width:14px;height:14px">
                                        消耗物资
                                    </el-button>
                                </div>
                                <div style="width:100%;margin-top:8px" v-if="materialsList && materialsList.length>0">
                                    <el-table :data="materialsList" style="width: 100%" stripe>
                                        <el-table-column prop="name" label="产品名称">

                                            <template #default="scoped">
                                                <div class="project-info">
                                                    <div class="img">
                                                        <el-image
                                                        :src="scoped.row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png'"
                                                        :zoom-rate="1.2"
                                                        :preview-src-list="[scoped.row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png']"
                                                        :initial-index="4"
                                                        style="width:100%;height:100%"
                                                        />
                                                    </div>
                                                    <div class="name-info">
                                                        <div class="p1">
                                                            <el-tooltip
                                                                class="box-item"
                                                                effect="dark"
                                                                :content="scoped.row.productName || scoped.row.goodsName"
                                                                placement="top"
                                                            >
                                                                <div class="content-view">
                                                                    {{ scoped.row.productName || scoped.row.goodsName}} 
                                                                </div>
                                                            </el-tooltip>

                                                            <!-- {{ scoped.row.productName || scoped.row.goodsName}} -->
                                                        </div>
                                                        <div class="p2">
                                                            <span>{{ scoped.row.code }}</span>
                                
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="type" label="类型">
                                            <template #default="scoped">
                                                {{ ["","产品","物资"][scoped.row.infoType] }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="date" label="单次消耗品">
                                            <template #header>
                                                单次消耗品
                                                <el-tooltip class="item" placement="top">
                                                    <template #content>
                                                        <div  style="width:310px">
                                                            单次消耗品：每做1次项目，就需要消耗1单位或多单位数量的商品。如：一次性毛巾；非单次消耗品：每次做项目时都会用到，一次只消耗部分或能多次使用的商品。如：理疗仪；精油
                                                        </div>
                                                    </template>
                                                    <img src="@/assets/icon/warning-circle.png" alt="" style="width:14px;height:14px;position: relative;left:4px;top:2px;cursor: pointer;">
                                                    
                                                </el-tooltip>
                                            </template>
                                            <template #default="scoped">
                                                <el-switch v-model="scoped.row.isConsume" placeholder="请输入" @change="editIsConsume(scoped.$index)"/>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="消耗数量">
                                            <template #default="scoped">
                                                <el-input
                                                    v-model="scoped.row.consumeNum"
                                                    @input="()=>{scoped.row.consumeNum=limitInt(scoped.row.consumeNum)}"
                                                    @blur="()=>{scoped.row.consumeNum=giveIntMin(scoped.row.consumeNum)}"
                                                    size="small"
                                                    style="width:120px"
                                                    placeholder="请输入"
                                                    @change="editConsumeNum"
                                                    v-if="scoped.row.isConsume"
                                                    
                                                />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="120">
                                            <template #default="scoped">
                                                <el-button type="danger" plain size="small" @click="delMaterials(scoped.$index,scoped.row.infoType)">
                                                    删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>

                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="执行信息">
                                <div style="width:100%">
                                    <el-button plain type="primary" @click="openAttr()">
                                        <img src="@/assets/icon/btn-add-blue.png" alt="" style="margin-right:8px;width:14px;height:14px" >
                                        添加属性
                                    </el-button>
                                </div>
                                <div style="width:100%;margin-top:8px" v-if="attrData && attrData.length>0">
                                    <el-table :data="attrData" style="width: 100%" stripe>
                                        <el-table-column prop="name" label="属性名称">
                                        </el-table-column>
                                        <el-table-column prop="type" label="属性类型">
                                            <template #default="scoped">
                                                <span v-if="scoped.row.type == 1">文本</span>
                                                <span v-if="scoped.row.type == 2">数值</span>
                                                <span v-if="scoped.row.type == 3 && scoped.row.selectType == 1">单选</span>
                                                <span v-if="scoped.row.type == 3 && scoped.row.selectType == 2">多选</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="isRequired" label="是否必填">
                                            <template #default="scoped">
                                                {{ scoped.row.isRequired?'是':'否' }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="defaultValue" label="默认值">
                                            <template #default="{ row }">
                                               

                                                <span v-if="row.type == 3 && row.selectType == 2">
                                                    <span v-if="row.defaultValue.length>0">
                                                        <span v-for="(lis,key) in row.defaultValue" :key="key">
                                                            {{ lis.value }}
                                                            <span v-if="key < row.defaultValue.length-1">、</span>
                                                        </span>
                                                    </span>
                                                    <span v-else>-</span>
                                                </span>
                                                <span v-else>{{ row.defaultValue  || '-'}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="120">
                                            <template #default="scoped">
                                                <el-button type="danger" plain size="small" @click="delAttr(scoped.$index)">
                                                    删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:8px">
                                    门店在为用户执行项目时，需要填写的执行信息
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="诊疗步骤">
                                <el-input v-model="form.diagnosticStep" placeholder="请输入" style="width:260px;" :rows="5" type="textarea" :maxlength="500"/>
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">自定义属性</span>

                    </div>
                    <div class="lis-item">

                        <div class="lis-i lis-i-other" v-for="(item,index) in projectAttributesList" :key="index">
                            <div class="l-name">{{ item.fieldName }}</div>
                            <div v-if="item.fieldType == 1">
                                <el-input v-model="item.fieldValue" placeholder="请输入" style="width:260px" :maxlength="100"/>
                            </div>
                            <div v-if="item.fieldType == 2">
                                <el-input v-model="item.fieldValue" placeholder="请输入" style="width:260px"  @input="()=>{item.fieldValue=limitFloat(item.fieldValue)}" @blur="()=>{item.fieldValue=giveFloatMin(item.fieldValue)}"/>
                            </div>
                            <div v-if="item.fieldType == 3">
                                <el-select v-model="item.fieldValue" placeholder="请选择"  clearable v-selectClose style="width:260px">
                                    <el-option :label="lis" :value="lis" v-for="(lis,key) in item.optionContent" :key="key"/>
                                </el-select>  
                            </div>
                            <div v-if="item.fieldType == 4">
                                <el-select v-model="item.fieldValue" placeholder="请选择"  clearable v-selectClose style="width:260px" multiple collapse-tags>
                                    <el-option :label="lis" :value="lis" v-for="(lis,key) in item.optionContent" :key="key"/>
                                </el-select>  
                            </div>
                        </div>
 
                    </div>
                </el-form>
            </div>
            <div class="info-lis" v-show="moduleType == '商城信息'">
                <el-form :model="shopForm" label-width="120px" ref="shopFormRef" :rules="shopRules">
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="允许上架商城" prop="mallInfoPut" :rules="getRules('select', '允许上架商城')">
                                <el-radio-group :disabled="form.salesState === 2" v-model="shopForm.mallInfoPut" class="ml-4" @change="changeMallInfoPut">
                                    <el-radio :label="1">允许上架</el-radio>
                                    <el-radio :label="2">不允许上架</el-radio>
                                </el-radio-group>
                                <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:3px">
                                    若允许上架，商品可在商城售卖
                                </div>
                            </el-form-item>
                        </div>

                    </div>
                    <div class="is-item" v-if="shopForm.mallInfoPut == 1">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="有效期" >
                                <el-input
                                    v-model="shopForm.mallInfoValidity"
                                    @input="()=>{shopForm.mallInfoValidity=limitInt(shopForm.mallInfoValidity,3)}"
                                    @blur="()=>{shopForm.mallInfoValidity=giveIntMin(shopForm.mallInfoValidity)}"
                                    style="width:120px"
                                    placeholder="请输入"
                                />
                                <span style="line-height: 14px;color: #000000;font-size: 14px;margin-left:8px">天有效</span>
                                <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:8px">
                                    顾客下单后的有效期，超过有效期后未到店核销将自动退款
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item" v-if="shopForm.mallInfoPut == 1">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="项目详情" prop="mallInfoDetails">
                                <el-input v-model="shopForm.mallInfoDetails" placeholder="请输入" style="width:260px;" :rows="5" type="textarea" :maxlength="500"/>
                                <div style="width:100%;position: relative;margin-top: 10px;">
                                    <UploadImg :multiple="true" @backValue="backValueActivityDetailImg"  :imageListUrlInfo="shopForm.projectPictureList" :maxImgLength="20">
                                    </UploadImg>
                                    <div style="font-size:12px;color:#666666;line-height:12px;width:100%;margin-top:8px">
                                        支持jpg、jpeg、png格式最多20张，单张不超过5M
                                    </div>
                                </div>
                            </el-form-item>
                        </div>

                    </div>

                    <div class="lis-item" v-if="shopForm.mallInfoPut == 1">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="购买须知" :rules="getRules('purchaseNotes', '购买须知')" prop="purchaseNotes">
                                <el-input v-model="shopForm.purchaseNotes" placeholder="请输入" style="width:260px;" :rows="5" type="textarea" :maxlength="500"/>
                            </el-form-item>
                        </div>

                    </div>
                </el-form>
            </div>
        </div>
        <el-dialog v-model="productFlag" title="选择产品" width="1000px" :before-close="cancelProductList">
            <div style="width:100%;height:500px" v-if="productFlag">
                <SeachTable 
                    :tableType="1"
                    ref="seachTable"
                    :tableSelection="true" 
                    :forms="formInline"
                    :btnLefts="btnLefts"
                    :btnRights="btnRights"
                    :tableLoading="tableLoading"
                    :tableConfig="tableConfig"
                    :tableData="tableData"
                    :totalPage="totalPage"
                    @handlerSearch="handlerSearch"
                    @selectHandle="selectHandle"
                    @selectAllHandle="selectAllChange"
                    :showLine="false"
                    :showBtn="false"
                >
                    <template #productCode="{ row }">
                        <div>{{ row.code }}</div>
                    </template>
                    <template #productName="{ row }">
                        <div class="project-info">
                            <div class="img">
                                <el-image
                                :src="row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png'"
                                :zoom-rate="1.2"
                                :preview-src-list="[row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png']"
                                :initial-index="4"
                                style="width:100%;height:100%"
                                />
                            </div>
                            <div class="name-info">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    :content="row.productName"
                                    placement="top-start"
                                >
                                    <div class="p1">
                                        {{ row.productName }}
                                    </div>
                                </el-tooltip>

                                <!-- <div class="p1">
                                    {{ row.productName }}
                                </div> -->
                                <div class="p2">
                                    <span>{{ row.specification + (row.specification && row.unit?"/":"") + row.unit }}</span>

                                </div>
                            </div>
                        </div>
                    </template>
                </SeachTable>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelProductList()">取消</el-button>
                    <el-button type="primary" @click="confrimProduct()">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="materialsFlag" title="选择物资" width="1000px" :before-close="cancelMaterialsList">
            <div style="width:100%;height:500px" v-if="materialsFlag">
                <SeachTable 
                    :tableType="1"
                    ref="seachTableMaterials"
                    :tableSelection="true" 
                    :forms="formInlineMaterials"
                    :btnLefts="btnLeftsMaterials"
                    :btnRights="btnRightsMaterials"
                    :tableLoading="tableLoadingMaterials"
                    :tableConfig="tableConfigMaterials"
                    :tableData="tableDataMaterials"
                    :totalPage="totalPageMaterials"
                    @handlerSearch="handlerSearchMaterials"
                    @selectHandle="selectHandleMaterials"
                    @selectAllHandle="selectAllChangeMaterials"
                    :showLine="false"
                    :showBtn="false"
                >
                    <template #code="{ row }">
                        <div>{{ row.code }}</div>
                    </template>
                    <template #goodsName="{ row }">
                        <div class="project-info">
                            <div class="img">
                                <el-image
                                :src="row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png'"
                                :zoom-rate="1.2"
                                :preview-src-list="[row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png']"
                                :initial-index="4"
                                style="width:100%;height:100%"
                                />
                            </div>
                            <div class="name-info">

                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    :content=" row.goodsName"
                                    placement="top-start"
                                >
                                    <div class="p1">
                                        {{  row.goodsName }}
                                    </div>
                                </el-tooltip>

                                <!-- <div class="p1">
                                    {{ row.goodsName }}
                                </div> -->
                                <div class="p2">
                                    <span>{{ row.specification + (row.specification && row.unit?"/":"") + row.unit }}</span>

                                </div>
                            </div>
                        </div>
                    </template>
                </SeachTable>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelMaterialsList()">取消</el-button>
                    <el-button type="primary" @click="confrimMaterials()">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="attrFlag" title="添加属性" width="380px">
            <div style="width:100%;box-sizing:border-box;padding:0 16px;max-height:500px;overflow: auto;" v-if="attrFlag">
                <el-form :model="attrForm" label-width="80px" ref="attrRef">
                    <el-form-item label="属性类型" :rules="getRules('select', '属性类型')" prop="type">
                        <el-radio-group v-model="attrForm.type" class="ml-4" @change="changeSelectType">
                            <el-radio :label="1">文本</el-radio>
                            <el-radio :label="2">数值</el-radio>
                            <el-radio :label="3">选项</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="属性名称" :rules="getRules('input', '属性名称')" prop="name">
                        <el-input v-model="attrForm.name" placeholder="请输入" style="width:100%" :maxlength="20" @blur="checkRepeatName(attrForm.name)"/>
                    </el-form-item>
                    <el-form-item label="选项类型" :rules="getRules('select', '选项类型')" prop="selectType" v-if="attrForm.type == 3">
                        <el-radio-group v-model="attrForm.selectType" class="ml-4" @change="changeSelectType">
                            <el-radio :label="1">单选</el-radio>
                            <el-radio :label="2">多选</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选项内容" required prop="selectValue" v-if="attrForm.type == 3">
                        <template  v-for="(item,index) in attrForm.selectValue" :key="index">
                            <div class="input-line">
                                <el-input v-model="item.value" placeholder="请输入" style="width:115px" :maxlength="50" @blur="checkRepeat(item.value,index)"/>
                                <img src="@/assets/icon/incre-icon.png" alt="" @click="increHandle()" v-if="attrForm.selectValue.length<=50">
                                <img src="@/assets/icon/diff-icon.png" alt="" @click="diffHandle(index,item.value)" v-if="attrForm.selectValue.length>1">

                                <a href="javascript:;" class="a-link" style="margin-left:10px;" @click="setAttrDefault(item.value,index)" v-if="(item.value!=='') && !item.isDefault">设为默认</a>
                                <a href="javascript:;" class="a-link red" style="margin-left:10px;" @click="cancelAttrDefault(item.value,index)" v-if="(item.value!=='') && item.isDefault">取消默认</a>
                            </div>  
                        </template>
        
                        
                    </el-form-item>
                    <el-form-item label="必填" >
                        <el-switch v-model="attrForm.isRequired"/>
                    </el-form-item>
                    <el-form-item label="默认值" prop="defaultValue" v-if="attrForm.type == 1 || attrForm.type == 2">
                        <el-input v-model="attrForm.defaultValue" placeholder="请输入" style="width:100%"  v-if="attrForm.type == 1" :maxlength="100"/>
                        <el-input v-model="attrForm.defaultValue" placeholder="请输入" style="width:100%"  @input="()=>{attrForm.defaultValue=limitFloat(attrForm.defaultValue)}" @blur="()=>{attrForm.defaultValue=giveFloatMin(attrForm.defaultValue)}" v-if="attrForm.type == 2"/>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="attrFlag = false">取消</el-button>
                    <el-button type="primary" @click="confrimAttr()">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style lang="less" scoped>

:deep(.el-table__inner-wrapper::before){
    display:none;
}
:deep(.el-table th.el-table__cell){
    background: #EBEBEB;
}
:deep(.el-dialog__body){
    padding:0 4px;
}
:deep(.el-table__header){
    tr{
        th{
            &:last-child{
                .cell{
                    border-right: 0px;
                }
            }
        }
    }
}
.a-link{
    color:#3480FF;
    font-size: 14px;
    cursor: pointer;
}
.page-contain{
    width: 100%;
    height: 100%;
    .red{
        color: var(--el-color-error);
    }
    :deep(.el-table th > .cell){
        border-right: 0;;
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .info-contain{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        padding:16px 24px;
        .btn-opea{
            width: 100%;
            height: 32px;
        }
        .info-lis{
            width: 100%;
            height: calc(100% - 32px);
            box-sizing:border-box;
            padding-top:24px;
            overflow:auto;
            .lis-head{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-bottom:16px;
                    .icon-view{
                        margin-right: 8px;
                        position: relative;
                        width: 14px;
                        height: 14px;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #10E7F9; 
                        }
                        .icon-view-on{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #3480FF; /* 背景色 */
                        }
                    }
                    .label-name{
                        color: #000000;
                        font-weight: bold;
                        font-size: 14px;
                        margin-right: 8px;
                    }
                    img{
                        width: 14px;
                        height: 14px;
                        cursor: pointer;
                    }
                }
        }
        .lis-item{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .lis-i{
                width: calc(100% / 3);
                margin-bottom:10px;
            }
            .lis-i-other{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .l-name{
                    width: 80px;
                    text-align: right;
                    word-break: break-all;
                    word-wrap: break-word;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    min-height: 32px;
                    padding: 0 12px 0 0;
                    font-size: var(--el-form-label-font-size);
                    color: var(--el-text-color-regular);
                    line-height: 20px;
                }
                
            }
        }
    }
    :deep(.el-table__row){
        .el-input .el-input__wrapper{
            background: rgba(0,0,0,0);
        }
    }
}
.input-line{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:16px;
    &:last-child{
        margin-bottom:0px;
    }
    img{
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-left:8px;
    }
}
.project-info{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    .img{
        width: 48px;
        height: 48px;
        

    }
    .name-info{
        width:calc(100% - 56px);
        box-sizing: border-box;
        padding-left:8px;
        .p1{
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            width: 100%;
            color: #222222;
            font-weight: bold;
            line-height: 14px;
            font-size: 14px;
            height: 28px;
        }
        .p2{
            width: 100%;
            margin-top:4px;
            color: #000;
            line-height: 14px;
            font-size: 14px;
 
        }
    }
}
</style>